﻿@model MvcSimplyCleverPart3.Models.AddressViewModel

@using (Html.BeginForm("Save", "Contact"))
{ 
    <div class="addressForm">
        <div class="row">
            <div class="label">@Html.LabelFor(m => m.CountryCode)</div>
            <div class="input">

                @Html.DropDownListFor(m => m.CountryCode, ViewHelper.GetCountries(Model.CountryCode), new { onChange = "countryChange(this);" })

            </div>
        </div>
        <div class="localized">
            @Html.Action("SwitchCountry", "Ajax", new { address = Model })
        </div>
        <div class="control">
            <input type="submit" value="Save" />
        </div>
    </div>
}


<script type="text/javascript">

    function countryChange(control) {

        var $form = jQuery(control).closest('form');

        $.ajax({ // create an AJAX call...
            data: $form.serialize(), // serialize the form
            type: 'POST', // GET or POST from the form
            url: '/Ajax/SwitchCountry', // the file to call from the form
            success: function (response) { // on success..
                $form.find('.localized').html(response); // update the DIV
                jQuery($form).removeData("validator");
                jQuery($form).removeData("unobtrusiveValidation");
                jQuery.validator.unobtrusive.parse($form);

                
            }
        });
    }
</script>

<style>
    input, select, textarea {
        margin: 0;
        padding: 0;
        font-size: 18px;
        outline: none;
        font-family: inherit;
        box-sizing: border-box /* make sure you use the other vendor prefixes */;
        width: 100%;
    }

    form .row {
        width: 100%;
        padding-bottom: 8px;
    }
</style>
